<template>
	<view>
		<!-- <cu-custom bgColor="text-156" :isBack="true">
			<block slot="content">水污染源自动监测仪校准记录表</block>
		</cu-custom> -->
		<uni-nav-bar :fixed="true" left-icon="back" title="水污染源自动监测仪校准记录表" color="#156DAC" @clickLeft="pageback"></uni-nav-bar>
		<view class="content padding">
			<form class="user-form">
				<view class="card">
					<view class="user-form-item">
						<view class="form-label">维护管理单位</view>
						<input class="form-input" v-model="form.key1" name="key1" placeholder="请输入维护管理单位" />
					</view>
					<view class="user-form-item">
						<view class="form-label">企业名称</view>
						<input class="form-input" v-model="form.key2" name="key2" placeholder="请输入企业名称" />
					</view>
					<view class="user-form-item">
						<view class="form-label">排放口名称</view>
						<input class="form-input" v-model="form.key3" name="key3" placeholder="请输入排放口名称" />
					</view>
					<view class="user-form-item">
						<view class="form-label">运维结果</view>
						<view class="form-input">
							<picker class="select" @change="(e)=>setFormData(e,'key4')" :value="form.key4" :range="typeList" range-key="codeName">
								<view v-if="typeList[getSelectIndex(typeList,form.key4,'code')] && typeList[getSelectIndex(typeList,form.key4,'code')].codeName" class="flex-justify-between">
									{{(typeList[getSelectIndex(typeList,form.key4,'code')].codeName)}}
									<uni-icons class="icon" type="arrowdown" size="12" color="#333"></uni-icons>
								</view>
								<view v-else class="empty-data flex-justify-between">
									<text>请选择</text>
									<uni-icons class="icon" type="arrowdown" size="12" color="#aaa"></uni-icons>
								</view>
							</picker>
						</view>
					</view>
					<view class="user-form-item">
						<view class="form-label">填报时间</view>
						<!-- <picker class="form-input" mode="date" :value="form.date" @change="(e)=> form.date = e.detail.value">
							<view>{{form.date || '请选择巡查日期'}}</view>
						</picker> -->
						<view class="form-input flex-justify-between">
							<TimeSelector
							    showType="dateToTime"
								@btnConfirm="(e)=>handleTimeChange(e,'key5')" 
							>
							    <text>{{form.key5 || '请选择填报时间'}}</text>
							</TimeSelector>
							<uni-icons class="icon" type="arrowdown" size="12" color="#aaa"></uni-icons>
						</view>
					</view>
					<view class="user-form-item">
						<view class="form-label">填报人</view>
						<input class="form-input" v-model="form.key6" name="address" placeholder="请输入填报人" />
					</view>
					<view class="user-form-item">
						<view class="form-label">签到时间</view>
						<view class="form-input flex-justify-between">
							<TimeSelector
							    showType="dateToTime"
								@btnConfirm="(e)=>handleTimeChange(e,'key7')" 
							>
							    <text>{{form.key7 || '请选择签到时间'}}</text>
							</TimeSelector>
							<uni-icons class="icon" type="arrowdown" size="12" color="#aaa"></uni-icons>
						</view>
					</view>
					<!-- <view class="user-form-item">
						<view class="form-label">维护单位</view>
						<picker class="form-input" @change="(e)=> form.unit = unitList[e.detail.value].name" :value="form.unit" :range="unitList" range-key="name">
							<view>{{form.unit || '请选择维护单位'}}</view>
						</picker>
					</view> -->
					
				</view>
				
				<!-- 表格部分 -->
				<view class="table-card">
					<view class="table-card-title">常规项</view>
					<view class="table-card-content">
						<view class="card-row">
							<view class="flex-1">仪器</view>
							<view class="flex-2">
								<input class="table-card-input"/>
							</view>
						</view>
						<view class="card-row header">
							<view class="flex-1">校验前各参数</view>
							<view class="flex-1">是否正常</view>
							<view class="flex-1">异常参数</view>
						</view>
						<view class="card-row" v-for="(item,index) in tableList" :key="index" >
							<view class="flex-1"><input v-model="item.key1" class="table-card-input"/></view>
							<view class="flex-1">
								<picker class="select flex-1" @change="(e)=>setTableData(e,index,'key2')" :value="item.key2" :range="resultList" range-key="label">
									<view v-if="item.key2">{{ item.key2 }}</view>
									<view v-else class="empty-data">请选择</view>
								</picker>
							</view>
							<view class="flex-1"><input v-model="item.key3" class="table-card-input"/></view>
						</view>
					</view>
					<view class="table-card-content">
						<view class="card-row">
							<view class="flex-1">型号</view>
							<view class="flex-2">
								<input v-model="form.key9" class="table-card-input"/>
							</view>
						</view>
						<view class="card-row header">
							<view class="flex-1">校验前各参数</view>
							<view class="flex-1">是否正常</view>
							<view class="flex-1">异常参数</view>
						</view>
						<view class="card-row" v-for="(item,index) in tableList" :key="index" >
							<view class="flex-1"><input v-model="item.key4" class="table-card-input"/></view>
							<view class="flex-1">
								<picker class="table-card-input flex-1" @change="(e)=>setTableData(e,index,'key5')" :value="item.key2" :range="resultList" range-key="label">
									<view v-if="item.key5">{{ item.key5 }}</view>
									<view v-else class="empty-data">请选择</view>
								</picker>
							</view>
							<view class="flex-1"><input  v-model="item.key6" class="table-card-input"/></view>
						</view>
						<view class="card-row">
							<view class="flex-1">记事</view>
							<view class="flex-2">
								<input v-model="form.key10" class="table-card-input"/>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 上传 -->
				<view class="card" style="height: auto;margin-top: 20upx;">
					<view class="user-form-item" style="height: auto;">
						<view class="form-label">上传图片</view>
						<view class="form-input" style="height: auto;border: 0px;">
							<TmUpload />
						</view>
					</view>
				</view>
				<view class="card" style="height: auto;margin-top: 20upx;">
					<view class="user-form-item" style="height: auto;">
						<view class="form-label">上传视频</view>
						<view class="form-input" style="height: auto;border: 0px;">
							<TmUploadVideo />
						</view>
					</view>
				</view>
					
			</form>
		</view>
	</view>
</template>
<script>
	var  graceChecker = require("../../../../common/graceChecker.js");
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import TimeSelector from '@/components/wing-time-selector/wing-time-selector.vue';
	import TmUpload from '@/components/tm-upload/tm-upload.vue'
	import TmUploadVideo from '@/components/tm-upload-video/tm-upload-video.vue'
	import {getDict} from "@/common/dict.js"
	
	export default {
		components: {
			uniIcons,uniPopup,uniNavBar,TimeSelector,TmUpload,TmUploadVideo
		},
		data() {
			return {
				typeList: [],
				tableValue: [],
				resultList:[
					{value:'是',label:'是'},
					{value:'否',label:'否'},
				],
				tableList:[
					{key1: '',key2:'是',key3: '',key4: '',key5: '',key6: ''},
					{key1: '',key2:'是',key3: '',key4: '',key5: '',key6: ''},
					{key1: '',key2:'是',key3: '',key4: '',key5: '',key6: ''}
				],
				unitList:[
					{id: 1,name: '单位一'},{id: 1,name: '单位二'},
				],
				form:{
					key1: '', key2: '内江雪花啤酒', key3: '雪花啤酒（内江）废水排放口', key4: '',key5: '',
					key6: '', key7: '',key8: '', key9: '',key10: '', key11: '',
					name: '',date: '',unit: '',
				}
			}
		},
		onLoad() {
			// 初始化字典
			this.typeList = getDict('e015')
			console.log(this.typeList)
		},
		methods: {
			pageback(){
				uni.navigateBack({
					delta: 1
				});
			},
			toggle(){
				this.$refs.popup.open()
			},
			tableChange(e){
				console.log(e.detail)
			},
			handleTimeChange(e,key) {
				console.log(e)
				this.form[key] = e.key
			},
			getSelectIndex(list,key,listKey = 'id') {
				let index = null
				list.forEach((item,i)=>{
					if(item[listKey] === key){
						index = i
						return index;
					}
				})
				return index
			},
			setFormData(e,key) {
				const index = e.detail.value
				const item = this.typeList[e.detail.value]
				this.form[key] = item.code
			},
			setTableData(e,index,key){
				let old = this.tableList[index]
				const idx = e.detail.value
				const item = this.resultList[idx]
				old[key] = item.value
				this.$set(this.tableList,index,old)
			}
		}
	}
</script>

<style lang="scss" scoped>
.popup-content {
	background-color: #fff;
	padding: 15px;
}

</style>
